'use strict';  
import React, { Component } from 'react';  
import {  
  StyleSheet,  
  View,  
  Image,  
  Text,  
  TouchableHighlight,  
  Animated,  
  Easing,  
  Dimensions,
  TouchableOpacity 
} from 'react-native';  
  
const {width, height} = Dimensions.get('window');
const [aWidth, aHeight] = [width*0.8, width*0.47];  //0.462
const [left, top] = [0, 0];
const [middleLeft, middleTop] = [(width - aWidth) / 2, (height - aHeight) / 2];   
  
export default class Mask extends Component {
  constructor(props) {  
    super(props);  
    this.state = {  
      offset: new Animated.Value(0),
      opacity: new Animated.Value(0),
      hide: true,  
    };  
  }  
  
  //显示动画  
  in = () => {  
    Animated.parallel([  
      Animated.timing(  
        this.state.opacity,  
        {  
          easing: Easing.linear,  
          duration: 500,  
          toValue: 0.8,  
        }  
      ),  
      Animated.timing(  
        this.state.offset,  
        {  
          easing: Easing.linear,  
          duration: 500,  
          toValue: 1,  
        }  
      )  
    ]).start();  
  }; 
  
  //隐藏动画  
  out = () => {  
    Animated.parallel([  
      Animated.timing(  
        this.state.opacity,  
        {  
          easing: Easing.linear,  
          duration: 500,  
          toValue: 0,  
        }  
      ),  
      Animated.timing(  
        this.state.offset,  
        {  
          easing: Easing.linear,  
          duration: 500,  
          toValue: 0,  
        }  
      )  
    ]).start();  
  
    setTimeout(  
      () => this.setState({hide: true}),  
      500  
    );  
  }; 
  
  //取消  
  iknow = () => {  
    if(!this.state.hide){  
      this.out();  
    }  
  };
  //显示
  show = () => {
    if(this.state.hide){  
      this.setState({hide: false}, this.in);  
    }  
  }  
  render() {  
    if(this.state.hide){  
      return (<View />)  
    } else {
      var vertical = 0;
      if(this.props.Vertical == "top"){
        vertical = 0;
      }else if(this.props.Vertical == "bottom"){
        vertical = height-this.props.height;
      }else{
        vertical = (height-this.props.height)/2;
      }
      return (
        <View style={styles.container}>
          <TouchableOpacity activeOpacity={1}  onPress={this.iknow}>
            <Animated.View style={ styles.mask } >
            </Animated.View>
          </TouchableOpacity>  
          <Animated.View style={[styles.tip, this.props.style, {
              width: this.props.width,
              height: this.props.height,
              transform: [{  
                translateY: this.state.offset.interpolate({  
                 inputRange: [0, 1],  
                 outputRange: [height, vertical]
                }),  
              }]  
            }]}>
            {this.props.children}
          </Animated.View> 
        </View>
        
      );  
    }  
  }
} 
const styles = StyleSheet.create({  
  container: {
    flex: 1,
    position:"absolute",
    left:left,  
    top:top,  
  },  
  mask: {  
    justifyContent:"center",  
    backgroundColor:"#383838",  
    opacity:0.8,  
    position:"absolute",
    width:width,  
    height:height,  
    left:0,  
    top:0,
  },  
  tip: {  
    width:aWidth,
    left:middleLeft,
    backgroundColor:"#fff",
    borderRadius: 10,
  },
});  